<template>
    <div class="productdetail">
           <div class="header">
         <span
       class="iconfont icon-weibiaoti39"
        @click="back"
        ></span>
        <div class="hd_cen">
              <span>{{objDetail.brand}}</span>
              <span class="price">￥{{objDetail.price}}</span>
        </div>
      <span class="iconfont icon-gengduo"></span>
     </div>
       <van-swipe :autoplay="3000">
         <van-swipe-item v-for="(image, index) in banner" :key="index">
           <img v-lazy="image.bigImgUrl" :src="image.bigImgUrl" />
         </van-swipe-item>
       </van-swipe>
       <h1>{{objDetail.name}}</h1>
       <p class="dazq">￥{{objDetail.marketPrice}}</p>
       <span class="dazh">￥{{objDetail.price}}</span>
       <span class="daz" v-for="item in objDetail.newTagList" :key="item.tag">{{item.tag}}</span>
       <p class="fahuo">{{objDetail.deliver_date}}</p>
       <div class="sg">
           <div class="sg_l">闪购</div>
           <div class="sg_r">距离结束
               <van-count-down :time=" objDetail.launchTime " format="DD 天 HH 时 mm 分 ss 秒" />
           </div>
       </div>
        <div class="sg">
           <div class="sg_l">促销</div>
           <div class="sg_r item1"  v-if="objDetail.couponScheme.eventCoupon[0]">
              {{objDetail.couponScheme.eventCoupon[0].couponContent}}
           </div>
       </div>
        <div class="sg fw">
           <div class="sg_l">服务</div>
           <div class="sg_r item2">
              <span v-for="(data,index) in objDetail.service_labels" :key="index" >| <span class="fw_r">{{data.label_title}}</span></span>
           </div>
       </div>
        <div class="sg">
           <div class="sg_l">尺码</div>
           <div class="sg_r item3">
             <div
              v-for="(data,index) in objDetail.size"
              :key="data.productId"
              >
              <span class="cm"   :class="{'active':index === num}"  @click="handlerActive(index)" > {{data.sizeLabel}}</span>
             </div>
           </div>
       </div>
       <div class="sp sg">
           商品参数
       </div>
       <div class="sp sg">
           商品详情</div>
        <img :src="item.bigImgUrl" alt="" v-for="(item,index) in objDetail.description.product_img1" :key="index" class="photos">
       <div class="zhuyi">
           {{objDetail.description.message}}
       </div>
       <div class="sp sg">
           包装清单
       </div>
       <img :src="objDetail.packageURL" alt="" class="photos">
       <div class="zhuyi">
           {{objDetail.packageText}}
       </div>
       <div class="sp sg">
           {{objDetail.brand}}
       </div>
       <img :src="objDetail.postSellUrl" alt="" class="photos last">
       <!-- 底部 -->
       <div class="bt">
           <div class="gwd">购物袋
               <span class="numb" v-if="numb">
                   {{numb}}
               </span>
           </div>
           <div class="cart" @click="gocart">加入购物车</div>
           <div class="buy">立即购买</div>
       </div>
    </div>
</template>
<script>
import { instance } from '@/utils/http'
import Vue from 'vue'
// 轮播图
import { Swipe, SwipeItem } from 'vant'
// 图片懒加载
import { Lazyload } from 'vant'
// 倒计时
import { CountDown } from 'vant'
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Lazyload)
Vue.use(CountDown)
export default {
  props: ['id'],
  data () {
    return {
      objDetail: {},
      banner: [],
      num: null,
      numb: null
    }
  },
  created () {
    instance.get(`/appapi/product/detail/v3?categoryId=2121005100000003854&productId=${this.$route.params.id}&userId=2014201499900118680&platform_code=H5&timestamp=1586439412153&summary=42dd69954f171ea15bf71fb8277bc4f0`)
      .then(res => {
        this.objDetail = res.data.infos
        this.banner = res.data.infos.images
        this.objDetail.size.filter(item => {
          item.isShow = false
        })
        this.isActive = this.objDetail.size
      })
  },
  mounted () {
    this.$store.commit('hide')
  },
  destroyed () {
    this.$store.commit('show')
  },
  methods: {
    handlerActive (index) {
      this.num = index
    },
    gocart () {
      this.numb = Number(this.numb)
      this.numb++
    },
    back () {
      this.$router.back()
    }
  }
}
</script>
<style lang="scss" >
.productdetail{
    padding: 0 20px;
    h1{
        font-weight: 100;
        color: #000;
        font-size: 18px;
        margin-top: 15px;
        text-transform:uppercase;
        margin-bottom: 6px;
    }
    .dazq{
        color: #ccc;
        font-size: 12px;
       text-decoration:line-through
    }
    .dazh{
       color: #dd2828;
       font-weight: bolder;
       font-size: 15px;
    }
    .daz{
        display: inline-block;
        font-size: 12px;
        margin-left: 15px;
       border: .5px solid rgb(0, 0, 0);
       padding: 1px;
       color: #000;
    }
    .fahuo{
        font-size: 12px;
        margin-top: 10px;
        padding-bottom: 30px;
    }
}
.van-swipe{
    height: 335px;
    box-shadow: 0 0.010333rem 0.023333rem 0.036667rem rgba(0,0,0,.05);
    img{
        width: 100%;
    }
    .van-swipe__indicator{
    width: 4px;
    height: 4px;
    border-radius:0px ;
    background: hsl(0, 2%, 40%);

    }
    .van-swipe__indicator--active{
        background: #000;
    }
}
.sg{
    display: flex;
    padding: 25px 0;
    font-size: 13px;
    border-top: 1px solid #ccc;
    .sg_l{
        margin-right: 20px;
        width: 33px;
    }
    .sg_r{
        color: #000;
        font-weight: bolder;
    }
    .item1{
    color: #dd2828;
     }
     .item2{
         color: #ccc;
         overflow: hidden;
         span{
             margin-left: -12px;
          .fw_r{
              padding:0 20px 0 16px;
          }

         }
     }
     .item3{
         display: flex;
        flex-flow: wrap;
     }
     .cm{
         display: inline-block;
         margin: -10px 20px 10px 0;
         width: 30px;
         height: 30px;
         text-align: center;
         background: #f1f1f1;
         line-height: 30px;
     }
     .active{
         background: #000;
         color: #fff;
     }
}
.sp{
    font-size:18px;
    font-weight: bolder;
    color: #000;
}
.van-count-down{
    display: inline-block;
}
.fw{
    padding-bottom: 15px;
}
.photos{
        width: 100%;
        display: block;
    }

.zhuyi{
    font-size: 12px;
    color: #000;
    padding-bottom: 20px;
    margin-top: 10px;
    img{
        width: 100%;
        display: block;
    }
}
.last{
    margin-bottom: 20px;
    margin-left: -20px;
    width: 375px;
}
.bt{
    position: fixed;
    bottom: 0;
    height: 50px;
    background: #fff;
    width: 100%;
    left: 0;
    display: flex;
    text-align: center;
    line-height: 50px;
    .gwd{
        width: 20%;
        position: relative;
    }
    .cart{
        width: 40%;
        border-right: 1px solid #ccc;
        font-weight: bolder;
        color: #000;
    }
    .buy{
        width: 40%;
        font-weight: bolder;
       color: red;
    }
}
.numb{
    position: absolute;
    width: 20px;
    height: 20px;
    background: red;
    border-radius:50%;
    text-align: center;
    line-height: 20px;
    font-weight: bolder;
    font-size: 10pxs;
    color: #fff;
    top: 5px;
    right: 0;
}
.header {
    display: flex;
    position: fixed;
    width: 100%;
    background: rgba(255,255,255,.8);
    top: 0;
    left: 0;
    justify-content: space-between;
    align-items: center;
    z-index: 11;
    height: 45px;
    padding: 0 10px;
    span {
        color: #000;
        &:nth-of-type(odd) {
            font-size: 16px;
            text-align: center;
        }
        &:nth-of-type(even) {
            font-size: .16rem;
            font-weight: bold;
        }
        &:last-of-type {
            font-size: .3rem;
        }
    }
    .hd_cen{
        display: flex;
        flex-direction:column;
        align-content: center;
        justify-content:center ;
        .price{
        font-weight: 100;
        color: #dd2828;
        font-size: 14px;
        }
    }

}
</style>
